<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>通知</title>
    <style>
        body {
            margin: 8px;
            font-family: 'Arial', sans-serif;
            text-align: center;
        }

        .showStudentDiv {
            background-size: cover;
            width: 700px;
            height: 200px;
            margin: auto;
            margin-top: 50px;

        }

        .item a {
            background-color: lightgrey;
            text-decoration: none;
            font-size: 15px;
            color: black;
            border-radius: 3px;
        }


        table {
            width: 70%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            border-collapse: collapse;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0.8;
        }

        table body {
            display: block;
            height: 300px;
            overflow-y: scroll;
        }

        table td {
            border: 1px solid #A6A6A6;
            height: 30px;
            width: 100px;
            text-align: center;
            font-size: 15px;
        }

        button {
            background-color: cornflowerblue;
            border: 1px solid #dcdfe6;
            color: #303133;
            padding: 6px 12px;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
        }

        button.disabled {
            background-color: gray;
            border: 1px solid #dcdfe6;
            color: #303133;
            padding: 6px 12px;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
        }

        nav {
            background-color: #f2f2f2;
            padding: 10px 0;
            text-align: center;
        }

        nav a {
            padding: 14px 20px;
            text-decoration: none;
            color: black;
            display: inline-block;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        nav a:hover {
            background-color: #ddd;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropbtn {
            padding: 14px 20px;
            text-decoration: none;
            color: black;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function getCookie(cookieName) {
        const strCookie = document.cookie
        const cookieList = strCookie.split(';')

        for (let i = 0; i < cookieList.length; i++) {
            const arr = cookieList[i].split('=')
            if (cookieName === arr[0].trim()) {
                return arr[1]
            }
        }

        return ''
    }

    $.ajax({
        url: "/notifications/loadNotifications",
        type: "get",
        data: {
            //username: "${username}"
            username: getCookie("username")
        },
        success: function (response) {
            console.log(response);

            if (response != "") {
                for (var i = 0; i < response.length; i++) {
                    var notification = response[i];
                    if(notification.recipient==getCookie("username")){
                        var row = $("<tr></tr>");
                        row.append($("<td>").text(notification.recipient));
                        row.append($("<td>").text(notification.sender));
                        row.append($("<td>").text(notification.referencegroup));
                        row.append($("<td>").text(notification.type));
                        row.append($("<td>").text(notification.text));
                        row.append($("<td>").text(notification.status));
                        row.append($("<td>").text(notification.createdtime));
                        // 根据通知状态添加不同的按钮或文本
                        if (notification.status === "已读") {
                            row.append($("<td>").text("已处理"));
                        } else {
                            row.append($("<td>").append($("<button>").attr("id", "operate").attr("onclick", "markAsRead('" + notification.notificationid + "')").text("标为已读")));
                        }
                        $("#list").append(row);
                    }

                }
            } else {
                const row = $("#list");
                row.empty();
            }
        },
        error: function (response) {
            console.log(response);
        }
    });

    // 标记通知为已读
    function markAsRead(notificationid) {
        $.ajax({
            url: "/notifications/markAsRead",
            type: "get",
            data: {
                notificationid: notificationid
            },
            success: function (response) {
                console.log(response);
                if (response == "success") {
                    alert("标记成功");
                    window.location.reload();
                } else {
                    alert("标记失败");
                }
            },
            error: function (response) {
                console.log(response);
            }
        });
    }

</script>
<nav>
    <a href="/">首页</a>
    <div class="dropdown">
        <a class="dropbtn">群组</a>
        <div class="dropdown-content">
            <a href="/page/toGroupPage" id="groupLink">群组管理</a>
            <a href="/page/toChatRoomPage" id="chatLink">群组聊天</a>
        </div>
    </div>
    <a href="/page/toAnswerPage">智能问答</a>
    <div class="dropdown">
        <a class="dropbtn">个人中心</a>
        <div class="dropdown-content">
            <a href="/page/toUserCenterPage" id="profileLink">个人资料</a>
            <a href="/page/toNotificationPage" id="notificationLink">通知</a>
            <a href="/page/Exit">登出</a>
        </div>
    </div>
</nav>
<table border="2" cellspacing="0" id="list">
    <tr align="center" class="title-row">
        <td>接收方</td>
        <td>发送方</td>
        <td>相关群组</td>
        <td>通知类型</td>
        <td>通知内容</td>
        <td>通知状态</td>
        <td>创建时间</td>
        <td>相关操作</td>
    </tr>
</table>
</body>
</html>